<template>
	<view class="wrapper">
		<div class="posf back-icon" @click="back(1)"
			:style="{background:`rgba(255,255,255,${scrollTop/40})`,top:`${safeTop-10}px`}">
			<u-icon name="arrow-left" :color="scrollTop>40?'#333':'#fff'" size="24"></u-icon>
		</div>
		<!-- 顶部背景 -->
		<image v-if="movieList.length>0" :src="movieList[index1].poster" mode="aspectFill" class="back-img"></image>
		<div class="main posr">
			<div class="bfff house bfff mb20 c999 mb30">
				<div class="align-end">
					<div class="flex1 nowrap f35 c333 fbold">{{detail.cinemaName}}</div>
				</div>
				<div class="mt20 mb15 center">
					<div class="flex1 nowrap">{{detail.address}}</div>
					<u-icon name="map" color="#999" size="16"></u-icon>
				</div>
				<!-- <div class="flex-start">
					<div class="tag f22 center mr20 center">3D 眼睛</div>
					<div class="tag f22 center mr20 center">儿童特惠</div>
				</div> -->
				<!-- <div class="space-between mt20">
					<div class="tag1">
						<div class="f24 mb10">超值购卷</div>
						<div class="f22">特惠观影卷</div>
					</div>
					<div class="tag2 flex1 ml10 mr10">
						<div class="f24 mb10">品城卡余额:2021.5元</div>
						<div class="f22">购票单张立减2~11元</div>
					</div>
					<div class="tag3">
						<div class="f24 mb10">优惠卷</div>
						<div class="f22">限时限量领卷</div>
					</div>
				</div> -->
			</div>
			<view class="wrap" v-if="movieList.length>0">
				<swipers :list="movieList" height="260" mode="none" name="posterUrl" :autoplay="false"
					img-mode="scaleToFill" class="swiper_bg" :effect3d="true" bg-color="none" :circular="false"
					effect3d-previous-margin="280" @change="setBackground" @click="setBackground" :current="index1">
				</swipers>
			</view>
			<div class="align-end mt15 mb20">
				<div class="f32">{{chooseMovice.movieName}}</div>
				<div class="f26 c999 ml15 mr5">评分</div>
				<div class="f26 cyellow">{{chooseMovice.score}}</div>
			</div>
			<div class="f26 tCenter c999">{{chooseMovice.duration}}分钟 / {{chooseMovice.type}}</div>
			<div class="date-main mt40">
				<div class="date-box colum posr ml40 tCenter" :class="dayIndex==i?'active':''"
					v-for="(v,i) in chooseMovice.showDateDetails" :key="i" @click="setIndex(i)">
					<div class="f26" :class="dayIndex==i?'ctheme':''">{{getWeekStr(v.showDate)}}</div>
					<div class="f24 c999 mt10">{{getTimeStr(v.showDate)}}</div>
				</div>
			</div>
		</div>
		<div class="list" v-if="chooseMovice.showDateDetails">
			<div class="bfff chang center c999 f24" v-for="(v,index) in chooseMovice.showDateDetails[dayIndex].plans">
				<div class="time">
					<div class="f30 c333 fbold">{{v.startTime}}</div>
					<div class="mt10">{{v.endTime}}</div>
				</div>
				<div class="flex1">
					<div class="f30 c333">{{v.showVersionType}}</div>
					<div class="mt10">{{v.hallName}}</div>
				</div>
				<div class="tRight">
					<!-- <div class="flex-end ctheme">
						<div class="bth-red card mr10">影城卡</div>
						30.9元
					</div> -->
					<div class="ctheme mt15 mb10">
						<!-- <text class="old-price c999">票价 39.9</text> -->
						{{parseFloat(v.minPprice)}}元  起
					</div>
					
					<!-- <u-tooltip text="下方显示" direction="bottom">
						<template #title>
							<div class="flex-end c999 f24">
								<div class="mr5">可优惠8元</div>
								<u-icon name="question-circle" color="#999" size="14"></u-icon>
							</div>
						</template>
						<template #text>
							<div class="cfff f22 discount">
								<div class="space-between mb10">
									<div>票价</div>
									<div>￥36.9</div>
								</div>
								<div class="space-between mb10">
									<div>影城卡</div>
									<div>- ￥6.9</div>
								</div>
								<div class="space-between mb10">
									<div>特惠活动</div>
									<div>- ￥4.9</div>
								</div>
							</div>
						</template>
					</u-tooltip> -->

				</div>
				<div class="bth-red ml50" @click="openBuy(v)">购票</div>
			</div>
		</div>
	</view>
</template>

<script>
	import swipers from '@/components/swipers.vue'
	export default {
		data() {
			return {
				movieList: [],
				//选中的电影
				chooseMovice: {},
				//swiper默认选中
				index1: 0,
				dayIndex: 0,
				scrollTop: 0,
				movieId: '',
				cinemaId: '',
				detail: {},
				name: '',
				location: {
					longitude: 0,
					latitude: 0
				},
				userInfo: '',
				phone:''
			}
		},
		components: {
			swipers
		},
		onPageScroll(e) {

			this.scrollTop = e.scrollTop
		},
		onLoad(e) {
			this.movieId = e.movieId || ''
			this.cinemaId = e.cinemaId
			this.name = e.name
			this.location = uni.getStorageSync('location')
			this.getNowCity()
			this.userInfo = uni.getStorageSync('uInfo')
			if (this.userInfo) {
				this.phone=this.userInfo.phone
			}
			this.getCinemaDetail()
		},
	 
		methods: {
			getNowCity() {
				let that = this
				uni.getFuzzyLocation({
					success(r) {
					 that.location = r;
						that.$http('/api/getCurrentCity', {
							longitude: r.longitude,
							latitude: r.latitude
						}).then(c => {
							that.city = {
								name: c.data.cityName,
								id: c.data.cityCode
							};  
						})
					},
					fail(r) {
						console.log(r) 
						that.location = uni.getStorageSync('location')
						that.city = uni.getStorageSync('city')
						that.sToast('定位失败，使用默认城市')
						uni.hideLoading()
					}
				})
			},
			// 打开购票页面
			openBuy(v) {
				if (uni.getStorageSync('uInfo')) {
					uni.setStorageSync('plan', v)
					this.openPage('../yingyuan/xuanzuo?showId=' + v.showId)
				} else {
					this.openPage('../dengLu/dengLu')
				}

			},
			getWeekStr(str) {
				const time = new Date(str)
				var weeks = new Array(
					"周日",
					"周一",
					"周二",
					"周三",
					"周四",
					"周五",
					"周六"
				);
				return weeks[time.getDay()]
			},
			// 格式化月日
			getTimeStr(str) {
				let time = str.split('-')
				return `${time[1]}月${time[2]}号`
			},
			// 查询电影院的详细信息（电影场次信息等）
			getCinemaDetail() {
				
				this.$http('/api/getCinemaDetail', {
					cinemaId: this.cinemaId,
					movieId: this.movieId,
					phone: this.phone,
					longitude: this.location.longitude || 0,
					latitude: this.location.latitude || 0
				}).then((r) => {
					uni.setStorageSync('cinemaDetail', r)
					this.detail = r.data
					this.movieList = r.data.movieList
					this.movieList.forEach((m, i) => {
						if (r.data.defaultMovieId) {
							if (m.movieId == r.data.defaultMovieId) {
								this.setBackground(i)
							}
						} else {
							this.setBackground(0)
						}

					})

				})
			},
			setIndex(index) {
				this.dayIndex = index
			},

			// 切换轮播改变背景
			setBackground(index) {
				this.index1 = index
				this.dayIndex = 0
				this.chooseMovice = this.movieList[index]
				uni.setStorageSync('chooseMovice', this.chooseMovice)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.discount {
		padding: 15rpx 13rpx 8rpx;
	}

	::v-deep .u-tooltip__wrapper {
		justify-content: flex-end;
		width: 100%;

		.u-tooltip__wrapper__popup__indicator {
			right: 20rpx;
		}

		.u-transition {
			transform: none !important;
			top: 40rpx !important;
			right: -20rpx;
		}
	}

	.tag1 {
		border: 1rpx solid #ff5858;
		color: #ff5858;
		background-color: #fef2f2;
		height: 80rpx;
		width: 175rpx;
		border-radius: 10rpx;
		padding: 12rpx 0 0 18rpx;
	}

	.tag2 {
		border: 1rpx solid #fea246;
		color: #fea246;
		background-color: #fdf7ec;
		height: 80rpx;
		width: 175rpx;
		border-radius: 10rpx;
		padding: 12rpx 0 0 18rpx;
	}

	.tag3 {
		border: 1rpx solid #27c3aa;
		color: #27c3aa;
		background-color: #d2fdf6;
		height: 80rpx;
		width: 175rpx;
		border-radius: 10rpx;
		padding: 12rpx 0 0 18rpx;
	}

	.card {
		border-radius: 5rpx;
		transform: scale(.7);
		transform-origin: right;
	}

	.old-price {
		text-decoration: line-through;
	}

	.chang {
		border-radius: 15rpx;
		margin: 25rpx 20rpx 0;
		padding: 0 20rpx;
		height: 154rpx;

		.time {
			width: 136rpx;
		}
	}

	.date-main {
		overflow-x: scroll;
		white-space: nowrap;
		overflow-y: visible;

		.date-box {
			display: inline-block;
		}

		.active {
			&::after {
				content: '';
				display: block;
				width: 40rpx;
				height: 5rpx;
				margin: 7rpx auto 0;
				background-color: #FF5555;
				border-radius: 4rpx;
			}
		}
	}



	.swiper-img {
		width: 110rpx;
		height: 160rpx;
		border-radius: 15rpx;
	}

	.main {
		padding: 20rpx;
		margin-top: - 160rpx;
		z-index: 2;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, .6), rgba(255, 255, 255, .8), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1), );
	}

	.tag {
		border: 1rpx solid #666;
		height: 36rpx;
		border-radius: 10rpx;
		padding: 0 14rpx;
	}

	.house {
		padding: 30rpx 20rpx;
		border-radius: 15rpx;
		box-shadow: 0 1rpx 10rpx 2rpx #e6e6e6;
	}

	.back-img {
		width: 750rpx;
		height: 580rpx;

	}

	.back-icon {
		top: 0;
		left: 0;
		z-index: 20;
		padding: 25rpx 0 25rpx 40rpx;
		width: 100%;
	}
</style>